<template>
  <div>
    <h4>表格组件</h4>
    <table>
      <tr v-for="(rowItem, rowIdx) in tableData">
        <td @dblclick="handleDbClick()" v-for="(colItem, colIdx) in rowItem">{{colItem}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      tableData: [
          ["11", "12", "13", "14", "15", "16", "17"],
          ["21", "22", "23", "24", "25", "26", "27"],
          ["31", "32", "33", "34", "35", "36", "37"],
          ["41", "42", "43", "44", "45", "46", "47"]
      ]
    }
  },

  methods: {
    handleDbClick() {

    }
  }
}
</script>

<style scoped>

  table {
    border-spacing: unset;
    border-top: 1px dotted #bdbdbd;
    border-left: 1px dotted #bdbdbd;
  }

  td {
    width: 78px;
    padding: 0;
    margin: 0;
    border-right: 1px dotted #bdbdbd;
    border-bottom: 1px dotted #bdbdbd;
    text-align: center;
  }
</style>